<template>
	<view class="discover">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="top" slot='top'>
				<u-navbar title="发现" :is-back="false"></u-navbar>
				<view class="hot">
					<view class="title">热门话题</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				request: {
					queryList: function() {
						return Promise.resolve([{
							img: 'https://www.auok.ltd/background.jpg'
						}, {
							img: 'https://www.auok.ltd/avatar.jpg'
						}, {}])
					}
				}
			};
		},
		methods: {
			queryList(pageNo, pageSize) {
				// console.log(pageNo, pageSize, this.request, this.dataList)
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging

				this.request.queryList({
					pageNo,
					pageSize
				}).then(res => {
					console.log(res)
					let arr = []
					for (let a = 0; a < 2; a++) {
						arr = arr.concat(res)
					}
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(arr);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		padding: 0 30rpx;
		border: 1px solid;
	}
</style>
